.doc > section.text {
	article {
		display: flex;
	}

	> header {
		.modelist li {
			font-size: 1rem;
			padding-top: $pad*0.275;
			padding-bottom: $pad*0.275;

			&:last-child::after {
				transition: opacity 1s;
				font-size: 0.625rem;
				padding: 0.25em 0.5em;
				display: inline-block;
				position: absolute;
				color: $doc-white;
				background: $theme-color;
				letter-spacing: 0.075em;
				transform: translate(0.25rem, -0.125rem);
				content: "NEW";
			}
		}

		.button.add {
			display: none !important; // hiding this all the time for now.
		}

		.result {
			font-weight: bold;
			
			&.error {
				background: $error-color;
				color: $doc-lightest;

				&.warning {
					background: $warning-color;
				}
			}
			
			&.pass {
				background: $pass-color;
				color: $doc-lightest;
			}
			
			&.fail {
				background: $fail-color;
				color: $doc-lightest;
			}
			
			em {
				font-style: normal;
				font-weight: normal;
				opacity: 0.75;
			}
		}
	}

	&.tests-viewed > header .modelist li:last-child::after {
		opacity: 0;
	}

	.editor {
		position: relative;
		box-sizing: border-box;
		display: flex;
		height: 100%;
		width: 100%;
		padding: $pad 0 $pad $pad;
		
		> .pad {
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			width: 100%;
			flex: 1;
			
			> .CodeMirror {
				color: $doc-black;
			}
			
			> iframe.resizedetector {
				opacity: 0;
				//visibility: hidden; // Firefox doesn't resize it if it's hidden!
				z-index: -1000;
				border: none;
				width: 100%;
				height: 100%;
				position: absolute;
			}
			
			> canvas.highlights {
				transition: opacity $transition-t;
				position: absolute;
			}
		
		}
	}

	.tests {
		display: none;
		width: 100%;
		background: $doc-lighter;
		padding: $pad;
		box-sizing: border-box;
		overflow: auto;

		.default {
			transition: opacity 1s;
			padding: $pad $pad * 0.5;
			color: $doc-dark;
		}

		.list:empty ~ .default {
			opacity: 1;
		}

		&.tests-added .default {
			opacity: 0;
		}

		.add.button {
			box-sizing: border-box;
			width: 100%;
			box-shadow: none;
			opacity: 0.5;
			background: rgba($doc-light, 0.75);
			color: $doc-black;
			padding: $pad * 0.75 $pad*0.625;
			margin-top: $pad * 0.125;
			font-weight: bold;
			border-radius: $control-radius;

			&:hover {
				opacity: 1.0;
			}
		}

		.list {
			li {
				background: $doc-lightest;
				box-shadow: 0 1px 2px $light-shadow;
				transition: margin $transition-t*0.5 linear;
				margin: $pad*0.125 0;
				display: inline-block;
				width: 100%;

				&:first-child {
					margin-top: 0;
				}

				&:hover {
					outline: $selected-stroke;
				}

				header {
					@extend %title;
					padding: $pad*0.5 $pad*0.75;

					input.name {
						color: $doc-darker;
						font-weight: bold;
						padding: 0;
						margin: 0 $pad * 0.5;
						background: transparent;
						border: none;
					}

					.icon.delete {
						@extend %link;
						color: $doc-light;
		
						&:hover {
							color: $error-color !important;
						}
					}

					.icon.fail {
						display: none;
						color: $error-color;
					}

					.icon.pass {
						color: $pass-color;
					}

					.type {
						background: transparent;
						text-transform: uppercase;
						font-size: 0.75em;
						color: $doc-light;
						font-weight: bold;
						box-shadow: none;
					}
				}

				article {
					border-top: solid 1px $doc-lighter;
					padding: $pad*0.5 0 $pad*0.5 $pad*0.75;
					display: none;
					height: 6em;
					align-items: stretch;

					.bar {
						background: $pass-color;
						width: 0px;
						outline: solid 1px $pass-color;
						margin: $pad*0.25 $pad*0.875 $pad*0.25 $pad*0.375;
					}

					.editor {
						padding: 0;
					}
				}

				&:not(.selected) {
					cursor: pointer;

					.type .icon.dropdown {
						opacity: 0;
					}

					* {
						pointer-events: none;
					}
				}

				&.selected {
					outline: $selected-stroke;
					background: $doc-white;
					box-shadow: 0 2px 3px $dark-shadow;
					margin: $pad*0.75 0;

					&:first-child {
						margin-top: 0;
					}

					article {
						display: flex;
					}

					.type {
						color: $doc-dark;

						&:hover {
							color: $doc-darkest;
						}
					}
				}

				&.fail {
					.icon.fail {
						display: block;
					}

					.icon.pass {
						display: none;
					}

					.bar {
						outline: solid 1px $error-color;
					}
				}

			}
		}
	}
}

.doc.tests-mode  > section.text {
	> header .button.add {
		display:inline-block;
	}

	
	> article > .editor {
		display: none;
	}

	.tests {
		display: block;
	}
}

#tooltip .texthover {
	.more {
		display: inline-block;
		color: $doc-light;
		font-style: italic;
		margin-top: $pad*0.75;
	}
	
	i {
		@extend %ellipsis;
	}
}